<template>
  <view class="details" @click="toDetail(details)">
    <view class='userInfo'>
      <view>
        <u--image :src="details?.avatar" width="70rpx" height="70rpx" radius="50%">
          <template #error class="flex-center-center">
            <view class="ic-error">
              <u-icon name="photo" size="20"></u-icon>
            </view>
          </template>
        </u--image>
      </view>
      <view class='nickname'>
        {{details.nickname}}
      </view>
    </view>
    <view class='content'>
      <!-- 内容 -->
      <view class="comment u-line-2" v-if='details.title'>{{details.title}}</view>
      <!-- 图片 -->
      <view class='pics' v-if='details.link_url.length>0'>


        <block v-if='details.link_url.length==1'>
          <view class="pic_item1 " v-for='(item,index) in details.link_url' :key='index'>
            <image :src='item' mode="widthFix"></image>
          </view>
        </block>
        <block v-else>
          <view class="pic_item" v-for='(item,index) in details.link_url' :key='index'
            v-show="details.link_url&&index < 3">
            <image :src='item' mode="aspectFill"></image>
          </view>
        </block>
      </view>
    </view>
    <view class='actions'>
      <view class='actions_item'>
        <u-icon name="https://ossresource.miyingbl.com/uploads/20240304/3a323d7bbcd45e66443c43c25867cde0.png" size="19"></u-icon> <text>分享</text>
      </view>
      <view class='actions_item' @click.stop="toppicCollect()">
        <u-icon name="star-fill" size="20" v-if='details.is_collect==1' color='#FFB300'></u-icon>
        <u-icon name="star" size="20" v-else color='#333333'> </u-icon>
        <text>{{details.collect_number}}</text>
      </view>
      <view class='actions_item' @click.stop="toppicPing()">
        <u-icon name="https://ossresource.miyingbl.com/uploads/20240304/94610cc057d42167004f2984ba4777c2.png" size="19"></u-icon>
        <text>{{details.comment_number}}</text>
      </view>
      <view class='actions_item' @click.stop="toppicZan()">
        <u-icon name="heart-fill" size="20"  v-if='details.is_zan==1' color='#FFB300'></u-icon>
        <u-icon name="heart" size="20" v-else color='#333333'></u-icon>
        <text>{{details.zan_number}}</text>
      </view>
    </view>

  </view>

  <h-login top="50" ref="login"></h-login>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { navigateTo } from '@/utils'
import { useMemberStore, useSystemStore } from '@/stores'
const login=ref(null)
const store = useMemberStore()

 const props = defineProps({
    details: {},
    type:1
  })

  const toDetail=(item)=> {
      uni.navigateTo({
          url: '/socials/detail/index?type='+props.type+'&id=' + item.id
      })
  }

  const toppicPing=()=> {
    const token = store?.token
    if (!token) {
      login.value.open()
    } else {
      navigateTo('/socials/detail/index?id=' +props.details.id + '&isCom=true')
    }
    //  topicDetail.value = row
    //  commentShow.value = true
  }
  const toppicCollect =async () =>{
    console.log(props.details)
    const token = store?.token
    if (!token) {
      login.value.open()
      return false
    }
    const res = await detailsCollect({
      id:props.details.id,
      type:props.type
    })
    if (props.details.is_collect == 0) {
     props.details.is_collect = 1
     props.details.collect_number++
    } else {
     props.details.is_collect = 0
     props.details.collect_number--
    }
    uni.showToast({
      title: res.msg,
      icon: 'none',
      duration: 2000,
    })
  }
  const  toppicZan= async ( )=> {
    const token = store?.token
    if (!token) {
      login.value.open()
      return false
    }
    const res = await detailsZan({
      id:props.details.id,      //动态id
      type:props.type,
      zan_type:1
    })
    if (props.details.is_zan == 1) {
     props.details.is_zan = 0
     props.details.zan_number--
    } else {
     props.details.is_zan = 1
     props.details.zan_number++
    }
    uni.showToast({
      title: res.msg,
      icon: 'none',
      duration: 2000,
    })
  }


</script>

<style lang="scss">
  .details {
    padding: 24rpx;
    border-radius: 12rpx;
    background: #fff;

    .userInfo {
      display: flex;
      align-items: center;

      .nickname {
        padding-left: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }
    }

    .content {
      .comment {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
        margin-top: 16rpx;
        line-height:1.5;
      }

      .pics {
        margin-top: 16rpx;
        overflow: hidden;

        .pic_item {
          width: 33.333%;
          float: left;
          height: 216rpx;
          box-sizing: border-box;
          padding: 1%;
          &:nth-child(3n+1) {
            margin-left: 0;
          }

          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }

        .pic_item1 {
          width: 300rpx;
          max-height:500rpx;
          overflow:hidden;
          image {
            width: 300rpx;
            border-radius: 10rpx;
          }
        }
      }
    }

    .actions {
      display: flex;
      margin-top: 20rpx;
      justify-content: space-between;
      .actions_item {
        display: flex;
        align-items: center;
        justify-items: center;
        justify-content: center;
        text {
          padding-left: 12rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
        }
      }

    }
  }
</style>
